
.not-found{
  width: 100%;
  height: 100%;
  background-color: #f0f1f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.not-found-content{
  position: relative;
  width: 50%;
  height: 50%;
  background-color: #000;
  border-radius: 30px;
  overflow: hidden;
}
.container {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%);
  border: none;
  background: transparent;
  box-shadow: none; 
  width: auto;
  height: auto;
  padding: 40px 50px;
  border-radius: 10px 0 0 0;
  cursor: pointer;
  font: 5vw 'MedievalSharp',cursive;
  color: transparent;
  letter-spacing: 4px;
  /* background: linear-gradient(45deg, transparent 0.5%, #000 1%, #00e6f6 5%, #000 5%); */
}

.container::before {
  content: "404";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: red;
  text-shadow: 3px 0 0 red;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: contrast(2);
  z-index: 10;
  animation: move_text 0.85s steps(2, end) infinite; }

  .container::after {
    content: "404";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: cyan;
    text-shadow: -3px 0 0 cyan;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: contrast(2);
    mix-blend-mode: lighten;
    z-index: 10;
    animation: move_text 2.15s steps(2, end) infinite; }

    .container .line {
      position: absolute;
      width: 200%;
      height: 2px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #000;
      z-index: 20;
      animation: move_line 5s steps(3, end) infinite; 
    }

    @keyframes move_line {
      0% {top: 50%;}
      10% {top: 20%;}
      20% {top: 70%;}
      30% {top: 30%;}
      40% {top: 40%;}
      50% {top: 50%;}
      60% {top: 70%;}
      70% {top: 30%;}
      80% {top: 35%;}
      90% {top: 40%;}
      100% {top: 50%;} 
    }
    @keyframes move_text {
      0% {transform: translate(-2px, 2px);}
      6% {transform: translate(2px, -2px);}
      10% {transform: translate(-2px, 2px);}
      18% {transform: translate(-2px, 2px);}
      25% {transform: translate(2px, 2px);}
      38% {transform: translate(2px, -2px);}
      49% {transform: translate(3px, -1px);}
      57% {transform: translate(0);}
      69% {transform: translate(-1px, 1px);}
      76% {transform: translate(0);}
      83% {transform: translate(1px, 1px);}
      95% {transform: translate(2px, -1px);}
      99% {transform: translate(1px, 1px);} 
    }

    .back-home{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,20px);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .back-home h3{
      width: 100%;
      text-align: center;
      color: #fff;
      font: bold 20px '宋体'; 
      margin-bottom: 20px;
    }